<template> 
	<view class="container">
		<view class="scroll">
			<view class="scroll-view">
				<view class="scroll-view-H-title">
					<view>商品图</view>
					<view>
						<text @click="ercodedown()">二维码海报</text>
						<text @click="checkimg()">全选</text>
					</view>
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="20" v-if="goods.SmallImages && goods.SmallImages.length>0">
					<view class="scroll-view-item_H" v-for="(items,index) in goods.SmallImages" :key="index">
						<view class="view-item-menu" @click="chooseitemimg(index)">
							<view v-if="choose_flag[index] === true"><image src="../../static/buytao/choose.png" mode="widthFix" lazy-load></image></view>
							<image :src="items" mode="widthFix" lazy-load></image>
						</view>
					</view>
				</scroll-view>
				
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="20" v-else>
					<view class="scroll-view-item_H" v-for="(items,index) in goods.PicList" :key="index">
						<view class="view-item-menu" @click="chooseitemimg(index)">
							<view v-if="choose_flag[index] === true"><image src="../../static/buytao/choose.png" mode="widthFix" lazy-load></image></view>
							<image :src="items" mode="widthFix" lazy-load></image>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
			
		<view class="scroll">
			<view class="scroll-view">
				<view class="scroll-view-H-title">
					<view>推荐语</view>
					<view @click="duplication('commend')"><text>复制推荐语</text></view>
				</view>
			</view>
			<view class="uni-textarea">
				<textarea :value="share_goods.commend"/>
			</view>
		</view>
			
		<view class="scroll">
			<view class="scroll-view">
				<view class="scroll-view-H-title">
					<view>评论</view>
					<view @click="duplication('comment')"><text>复制评论</text></view>
				</view>
			</view>
			<view class="uni-textarea">
				<textarea :value="share_goods.comment"/>
			</view>
		</view>
		
		<view style="height:250upx;"></view>
		
		<view class="share-footer">
			<share-down :sharedataTemp="sharedata"></share-down>
		</view>
			
	</view>
</template>

<script>
	import tools from '../../common/tools'
	import apiindex from '../../common/api/index'
    import shareDown from '../../components/share/share-btn/share-down'
	export default {
		data() {
			return {
				params_goods:{	//请求参数
					site:'',
					goods_id:'',
				},
				goods_link:'',	//转链的淘口令
				goods:{},		//商品详情参数
				
				share_goods:{
					commend:'',//推荐语
					comment:'',//评论
				},
				sharedata:[],
				
				//选中的图片
				choose_flag:[],
				flag:true,//图片全选全不选
			}
		},
		components:{
			tools,
			shareDown,
		},
		mounted() {
		},
		
		onLoad(options) {
			this.accept_params(options)
			this.goodsdetail()
		},
		
		methods: {
			//显示图片
			choose_img(){
				let num = this.goods.SmallImages.length
				let list_img = [];
				if(num != 0){
					list_img = this.goods.SmallImages
				}else{
					num = this.goods.PicList.length
					list_img =this.goods.PicList
				}
				for(let i=0;i<num;i++){
					this.choose_flag[i]=true
				}
				this.sharedata=list_img
			},
			
			//图片全选/全不选
			checkimg(){
				if(this.flag){
					for(let i=0;i<this.choose_flag.length;i++){
						this.$set(this.choose_flag,i,false)
					}
					this.sharedata={}
					this.flag=false
				}else{
					for(let i=0;i<this.choose_flag.length;i++){
						this.$set(this.choose_flag,i,true)
					}
					this.sharedata=this.goods.PicList
					this.flag=true
				}
			},
			
			//单个图片选择
			chooseitemimg(index){
				this.choose_flag[index] ? this.$set(this.choose_flag,index,false) : this.$set(this.choose_flag,index,true)
			},
			
			//接收参数
			accept_params(options){
				let params=JSON.parse(options.goods_params)
				//请求参数
				this.params_goods.site=params.site
				this.params_goods.goods_id=params.goods_id
				this.goods_link=params.goods_link
				//评论 推荐语
			},
			
			//显示评论和推荐语
			share_goods_func(){
				this.share_goods.commend=this.goods.Title+"\n"
				+"【原价】"+this.goods.Price+"元\n"
				+"【劵后价】"+this.goods.EndPrice+"元\n"
				+"【推荐语】"+this.goods.Suggest+"\n"
				+"【下单姿势】"+this.goods_link
				
				this.share_goods.comment="【原价】"+this.goods.Price+"元\n"
				+"【劵后价】"+this.goods.EndPrice+"元\n"
				+"----------------------------"+"\n"
				+this.goods_link
			},
			
			
			//复制
			duplication(flag){
				let copy=''
				switch(flag){
					case 'commend':
						copy = this.share_goods.commend
					break;
					case 'comment':
						copy = this.share_goods.comment
					break;
					default:
						copy = this.share_goods.commend
						break;
				}
				uni.setClipboardData({
					data:copy
				});
			},
			
			//商品详情
			goodsdetail(){
				apiindex.goodsdetail(this.params_goods).then(res => {
					if(res.code == 1){
						this.goods=res.data
						this.share_goods_func()		//分享的推荐语和评论
						this.choose_img()			//显示选中的图片
					}
				}).catch(res => {
				　　// 失败进行的操作
				});
			},
			
			//生成海报图片
			ercodedown(){
				let num = this.goods.SmallImages.length		//当前的图片列表
				let list_img = []							//当前的所有的图片
				let choose_flag=true						//用户是否有选中的图片
				let img=''									//选中的图片
				if(num != 0){
					list_img = this.goods.SmallImages
				}else{
					num = this.goods.PicList.length
					list_img =this.goods.PicList
				}
				for(let i=0;i<num;i++){
					if(this.choose_flag[i] == true){
						img=list_img[i]
						choose_flag=false
						break;
					}
				}
				if(choose_flag){
					img=this.goods.PicLogo
				}
				let goods_params={
					title:this.goods.Title,
					monthsale:this.goods.MonthSale,
					endprice:this.goods.EndPrice,
					price:this.goods.Price,
					img_url:img,
					taoword:this.goods_link,
					couponmoney:this.goods.CouponMoney,
					shoptype:this.goods.ShopType,
				}
				uni.navigateTo({
					url:"../poster/goods?goods_params="+encodeURIComponent(JSON.stringify(goods_params))
				})
			},
			
			scroll(){
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#F5F5F5;
	}
	/**商品图片**/
	.scroll{
		width:96%;
		padding:0 2%;
		background-color:#FFFFFF;
		margin-bottom:20upx;
	}
	.scroll-view{
		width: 100%;
		border-radius:20upx;
		background:#FFFFFF;
	}
	.platform-view-section{
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		justify-content:left;
		flex-wrap:wrap;
	}
	.platform-ad{
		flex:1;
		padding:20upx;
	}
	.platform-ad>image{
		width:100%;
	}
	
	.scroll-view-H-title{
		font-size:40upx;
		font-weight:bold;
		border-bottom:1px solid #F5F5F5;
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		padding:20upx 0;
	}
	.scroll-view-H-title>view{
		width:50%;
	}
	.scroll-view-H-title>view:last-child{
		color:#F50E34;
		font-weight:normal;
		text-align:right;
	}
	.scroll-view-H-title>view:last-child>text{
		background-color:#FFD9D9;
		padding:10upx 30upx;
		border-radius:20upx;
		margin-right:20upx;
	}
	.scroll-view_H{
		flex-direction: row;
		white-space: nowrap;
		padding:20upx 0;
	}
	.scroll-view-item_H{
		width: 40%;
		display: inline-block;
		flex-wrap: nowrap;
	}
	.view-item-menu{
		display: block;
		text-align:center;
		line-height:40px;
	}
	.view-item-menu>view{
		width:50upx;
		height:50upx;
		position:absolute;
		z-index: 1;
	}
	.view-item-menu>view>image{
		width:50upx;
		height:50upx;
	}
	.view-item-menu>image{
		margin:0 auto;
		width:95%;
		height:300upx;
		display: block;
		border-radius:10upx;
	}
	
	/**推荐语**/
	.uni-textarea{
		padding-bottom:20upx;
	}
	.uni-textarea>textarea{
		background-color:#F5F5F5;
		height:200upx;
	}
	.share-footer{
		position: fixed;
		z-index:100;
		bottom:0;
	}
</style>